<template>
  <!-- 地图容器元素，高德地图将在这里初始化和渲染 -->
  <view class="map-container" @click="handleMapClick">
    <div id="container"></div>
    
    <!-- 添加POI按钮 - 现在用于引导用户点击地图后跳转到添加页面 -->
    <!-- <div class="add-poi-btn" v-if="showAddButton" @click.stop="startAddPOI">
      <div class="btn-icon">+</div>
    </div>
     -->
    <!-- 位置提示浮层 -->
    <div class="position-tooltip" v-if="showTooltip" :style="tooltipStyle">
      <text class="tooltip-text">经度: {{ formatCoordinate(clickedPosition.lng) }}</text>
      <text class="tooltip-text">纬度: {{ formatCoordinate(clickedPosition.lat) }}</text>
      <button class="add-here-btn" @click.stop="navigateToAddPage">在此处添加设施</button>
    </div>
  </view>
</template>

<script setup>
import { onMounted, onUnmounted, ref, watch, computed } from "vue";
import { usePOIStore } from '@/store/poiStore';

// 接收父组件传入的props
const props = defineProps({
  showPOIMarkers: {
    type: Boolean,
    default: false
  },
  enableClick: {
    type: Boolean,
    default: true
  },
  showAddButton: {
    type: Boolean,
    default: false
  },
  isStaticMap: {
    type: Boolean,
    default: false
  }
});

// 定义事件
const emit = defineEmits(['position-click', 'add-poi', 'map-click']);

// 地图实例变量
let map = null;
// 定义加载状态
const isMapLoaded = ref(false);
const isMapError = ref(false);
// POI标记数组
const markers = ref([]);

// 点击位置状态
const clickedPosition = ref({ lng: 0, lat: 0 });
let lastClickTime = 0; // 用于防止重复点击

// 计算属性：判断位置是否有效（非NaN）
const isValidPosition = computed(() => {
  return !isNaN(clickedPosition.value.lng) && 
         !isNaN(clickedPosition.value.lat) &&
         clickedPosition.value.lng !== 0 &&
         clickedPosition.value.lat !== 0;
});

// 格式化坐标，避免NaN显示
function formatCoordinate(value) {
  if (isNaN(value)) return "0.000000";
  return value.toFixed(6);
}

// 设置提示框样式
const tooltipStyle = ref({
  left: '0px',
  top: '0px'
});

// 显示提示状态
const showTooltip = ref(false);

// 定时器变量
let tooltipTimer = null;

// 是否准备添加设施（用户点击了添加按钮后设为true）
const readyToAdd = ref(false);

// 开始添加POI模式 - 引导用户点击地图选择位置
function startAddPOI() {
  // 提示用户点击地图选择位置
  uni.showToast({
    title: '请点击地图选择位置',
    icon: 'none',
    duration: 2000
  });
  
  // 标记为准备添加状态
  readyToAdd.value = true;
  
  // 如果未选择位置，使用默认位置（杭州西湖）
  const defaultPosition = {
    lng: 120.15,
    lat: 30.25
  };
  
  const position = isValidPosition.value ? clickedPosition.value : defaultPosition;
  
  // 发送添加POI事件
  emit('add-poi', position);
}

// 导航到添加页面
function navigateToAddPage() {
  // 存储临时位置到本地存储
  try {
    uni.setStorageSync('temp_facility_position', JSON.stringify({
      lat: clickedPosition.value.lat,
      lng: clickedPosition.value.lng
    }));
  } catch (e) {
    console.error('保存临时位置数据失败:', e);
  }
  
  // 导航到添加设施页面
  uni.navigateTo({
    url: `/pages/facility/add?lng=${formatCoordinate(clickedPosition.value.lng)}&lat=${formatCoordinate(clickedPosition.value.lat)}`,
    success: () => {
      console.log('导航到设施添加页面，经纬度:', clickedPosition.value.lng, clickedPosition.value.lat);
      // 重置准备添加状态
      readyToAdd.value = false;
    },
    fail: (err) => {
      console.error('导航失败:', err);
      uni.showToast({
        title: '导航到添加页面失败',
        icon: 'none'
      });
      // 重置准备添加状态
      readyToAdd.value = false;
    }
  });
}

// 创建地图的函数
function createMap() {
  try {
    console.log("尝试创建地图...");
    
    // 获取全局对象，兼容不同环境
    const globalObj = typeof window !== 'undefined' ? window : global;
    
    // 检查AMap是否已存在
    if (!globalObj.AMap) {
      console.error("AMap对象不存在，尝试使用静态地图");
      staticMapFallback();
      return;
    }
    
    // 检查container元素是否存在
    const container = document.getElementById('container');
    if (!container) {
      console.error("找不到container元素");
      isMapError.value = true;
      staticMapFallback();
      return;
    }
    
    console.log("开始创建地图实例");
    
    // 创建地图实例
    map = new globalObj.AMap.Map('container', {
      viewMode: "2D", // 改为2D模式提高兼容性
      zoom: 11,
      center: [120.15, 30.25] // 杭州西湖中心点
    });
    
    console.log("地图实例创建成功，添加控件");
    
    // 添加控件
    map.addControl(new globalObj.AMap.Scale());
    
    // 添加定位控件
    const geolocation = new globalObj.AMap.Geolocation({
      enableHighAccuracy: true,
      timeout: 10000,
      buttonPosition: 'RB',
      buttonOffset: new globalObj.AMap.Pixel(15, 150),
      zoomToAccuracy: true
    });
    map.addControl(geolocation);
    
    // 添加工具条
    const toolBar = new globalObj.AMap.ToolBar({
      position: 'RB',
      offset: new globalObj.AMap.Pixel(10, 280)
    });
    map.addControl(toolBar);
    
    // 添加点击事件监听
    map.on('click', (e) => {
      if (props.enableClick) {
        const position = {
          lng: e.lnglat.getLng(),
          lat: e.lnglat.getLat()
        };
        clickedPosition.value = position;
        emit('position-click', position);
        
        // 显示提示，使用页面坐标
        const pixel = e.pixel;
        showPositionToast(pixel.x, pixel.y);
      }
    });
    
    isMapLoaded.value = true;
    console.log("地图已成功加载和渲染");
    
    // 初始处理POI标记显示
    if (props.showPOIMarkers) {
      showPOIMarkers();
    }
    
  } catch (error) {
    console.error("创建地图时发生错误:", error);
    isMapError.value = true;
    staticMapFallback();
  }
}

// 静态地图后备功能
function staticMapFallback() {
  console.log("启用静态地图模式");
  
  isMapError.value = true;
  
  // 清除可能的加载提示
  const container = document.getElementById('container');
  if (container) {
    // 添加静态地图背景
    container.style.backgroundImage = "url('https://restapi.amap.com/v3/staticmap?location=120.15,30.25&zoom=11&size=800*600&key=79f4d4eb1ed11f2b0ac4f1065c0788da')";
    container.style.backgroundSize = "cover";
    container.style.backgroundPosition = "center";
    
    // 添加提示文本
    const notice = document.createElement('div');
    notice.className = 'static-map-notice';
    notice.innerText = '地图服务不可用，已启用静态地图模式。点击地图可直接添加点位。';
    container.appendChild(notice);
  }
  
  // 设置在静态地图上点击的处理逻辑
  isMapLoaded.value = true; // 允许点击事件处理
  
  // 发送加载失败通知
  uni.showToast({
    title: '地图API加载失败，已启用静态模式',
    icon: 'none',
    duration: 2000
  });
}

// 显示POI标记
function showPOIMarkers() {
  if (!map || !isMapLoaded.value) return;
  
  try {
    // 获取POI数据
    const poiStore = usePOIStore();
    const pois = poiStore.getAllPOIs;
    
    // 清除现有标记
    clearMarkers();
    
    // 如果没有POI数据，提示用户
    if (!pois || pois.length === 0) {
      uni.showToast({
        title: '暂无POI数据',
        icon: 'none'
      });
      return;
    }
    
    console.log('显示POI标记，数量:', pois.length);
    
    // 添加新标记
    pois.forEach(poi => {
      if (poi.location) {
        const marker = new window.AMap.Marker({
          position: [poi.location.lng, poi.location.lat],
          title: poi.name,
          clickable: true
        });
        
        marker.on('click', () => {
          showPOIInfo(poi);
        });
        
        marker.setMap(map);
        markers.value.push(marker);
      }
    });
  } catch (error) {
    console.error('显示POI标记失败:', error);
  }
}

// 清除所有标记
function clearMarkers() {
  if (markers.value.length > 0) {
    markers.value.forEach(marker => {
      marker.setMap(null);
    });
    markers.value = [];
  }
}

// 显示POI信息窗口
function showPOIInfo(poi) {
  if (!map) return;
  
  // 创建信息窗口内容
  const content = `<div class="info-window">
    <h3>${poi.name}</h3>
    <p>${poi.address || ''}</p>
    <p>${poi.details || ''}</p>
  </div>`;
  
  // 创建信息窗口
  const infoWindow = new window.AMap.InfoWindow({
    content: content,
    offset: new window.AMap.Pixel(0, -30)
  });
  
  // 打开信息窗口
  infoWindow.open(map, [poi.location.lng, poi.location.lat]);
}

// 监听标记显示状态变化
watch(() => props.showPOIMarkers, (newVal) => {
  if (newVal) {
    showPOIMarkers();
  } else {
    clearMarkers();
  }
});

// 处理地图点击事件 - 将点击位置转换为经纬度坐标
const handleMapClick = (event) => {
  // 如果点击功能被禁用或地图未加载完成，则不处理点击
  if (!props.enableClick || !isMapLoaded.value) return;
  
  try {
    // 防止重复点击 - 添加点击时间间隔限制（500毫秒）
    const now = Date.now();
    if (now - lastClickTime < 500) return;
    lastClickTime = now;
    
    // 如果是使用静态地图模式
    if (props.isStaticMap || isMapError.value) {
      // 获取点击位置相对于容器的坐标
      const container = document.getElementById('container');
      if (!container) return;
      
      const rect = container.getBoundingClientRect();
      const x = event.clientX - rect.left; // 鼠标相对于容器左边的位置
      const y = event.clientY - rect.top;  // 鼠标相对于容器顶部的位置
      
      // 计算点击位置占容器的比例
      const percentX = x / rect.width;
      const percentY = y / rect.height;
      
      // 地图边界 (简化的杭州西湖周边范围)
      const bounds = {
        west: 120.11, // 最西经度
        east: 120.18, // 最东经度
        north: 30.30, // 最北纬度
        south: 30.21  // 最南纬度
      };
      
      // 根据点击位置在容器中的比例计算实际经纬度
      // 经度从西向东递增，所以percentX对应从west到east的插值
      // 纬度从南向北递增，但屏幕Y是从上到下递增，所以需要用(1-percentY)
      const lng = bounds.west + percentX * (bounds.east - bounds.west);
      const lat = bounds.south + (1 - percentY) * (bounds.north - bounds.south);
      
      // 确保计算出的经纬度有效且在两位小数
      const validLng = isNaN(lng) ? 120.14 : parseFloat(lng.toFixed(6));
      const validLat = isNaN(lat) ? 30.26 : parseFloat(lat.toFixed(6));
      
      // 更新点击位置
      clickedPosition.value = { lng: validLng, lat: validLat };
      
      // 显示位置提示
      showPositionToast(event.clientX, event.clientY);
    } else if (map) {
      // 动态地图模式 - 直接使用高德地图API获取点击位置
      const lnglat = event.lnglat;
      if (lnglat) {
        // 高德地图点击事件返回lnglat对象
        clickedPosition.value = { 
          lng: parseFloat(lnglat.getLng().toFixed(6)),
          lat: parseFloat(lnglat.getLat().toFixed(6))
        };
        
        // 显示位置提示 - 需要转换为屏幕坐标
        const pixel = map.lngLatToContainer(lnglat);
        showPositionToast(pixel.x, pixel.y);
      }
    }
    
    // 如果点击位置无效，使用默认位置（杭州西湖）
    if (!isValidPosition.value) {
      clickedPosition.value = {
        lng: 120.15,
        lat: 30.25
      };
    }
    
    // 发送位置点击事件
    emit('position-click', clickedPosition.value);
    emit('map-click', {
      longitude: clickedPosition.value.lng,
      latitude: clickedPosition.value.lat
    });
    
    // 如果用户已点击添加按钮（处于准备添加状态），则自动导航到添加页面
    if (readyToAdd.value) {
      navigateToAddPage();
    }
  } catch (error) {
    console.error('处理地图点击出错:', error);
    uni.showToast({
      title: '获取位置失败，请重试',
      icon: 'none'
    });
  }
};

// 显示位置提示
function showPositionToast(clientX, clientY) {
  // 如果没有有效位置，不显示提示
  if (!isValidPosition.value) return;
  
  // 设置提示位置
  tooltipStyle.value = {
    left: `${clientX}px`,
    top: `${clientY - 70}px`
  };
  
  // 显示提示
  showTooltip.value = true;
  
  // 清除可能存在的定时器
  if (tooltipTimer) {
    clearTimeout(tooltipTimer);
  }
  
  // 设置自动隐藏，延长显示时间为5秒，让用户有足够时间点击"在此处添加"
  tooltipTimer = setTimeout(() => {
    showTooltip.value = false;
  }, 5000);
}

onMounted(() => {
  console.log("地图组件已挂载，准备加载");
  
  // 兼容检查window对象
  if (typeof window === 'undefined') {
    console.error("当前环境不支持window对象，可能无法加载地图");
    return;
  }
  
  // 设置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: "1b60a36d751dcf1e93a2975d4908982e"
  };
  
  // 延迟加载脚本，给页面渲染更多时间
  setTimeout(() => {
    try {
      // 检查是否已经加载
      if (window.AMap) {
        console.log("AMap已存在，直接创建地图");
        createMap();
        return;
      }
      
      // 创建脚本元素
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.async = true;
      script.src = "https://webapi.amap.com/maps?v=1.4.15&key=79f4d4eb1ed11f2b0ac4f1065c0788da&plugin=AMap.Scale,AMap.ToolBar,AMap.Geolocation,AMap.InfoWindow";
      
      script.onerror = () => {
        console.error("地图脚本加载失败");
        isMapError.value = true;
        staticMapFallback();
      };
      
      script.onload = () => {
        console.log("地图脚本加载成功");
        // 延迟创建地图，确保DOM已完全渲染
        setTimeout(createMap, 300);
      };
      
      document.head.appendChild(script);
    } catch (error) {
      console.error("加载地图脚本时发生错误:", error);
      isMapError.value = true;
      staticMapFallback();
    }
  }, 500); // 延迟500ms，确保页面渲染
});

onUnmounted(() => {
  // 销毁地图实例
  if (map) {
    map.destroy();
    map = null;
    console.log("地图实例已销毁");
  }
  
  // 清除定时器
  if (tooltipTimer) {
    clearTimeout(tooltipTimer);
  }
});
</script>

<style scoped>
/* 外层容器 */
.map-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
/* 地图容器样式 */
#container {
  width: 100%;        /* 宽度占满父容器 */
  height: 100%;       /* 高度占满父容器 */
  position: relative;  /* 相对定位 */
  background-color: #f5f5f5; /* 默认背景色 */
  cursor: crosshair;  /* 十字光标，表示可点击 */
}

/* 添加POI按钮样式 */
.add-poi-btn {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #4B89FD, #3F7BFC);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(63, 123, 252, 0.3);
  z-index: 100;
  transform: scale(1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.add-poi-btn:active {
  transform: scale(0.92);
  box-shadow: 0 2rpx 8rpx rgba(63, 123, 252, 0.2);
}

.btn-icon {
  color: white;
  font-size: 48rpx;
  font-weight: 300;
  margin-top: -5rpx;
}

/* 静态地图通知样式 */
.static-map-notice {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  text-align: center;
  font-size: 14px;
  z-index: 5;
}

/* 地图加载中样式 */
.map-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .static-map-notice {
    font-size: 12px;
    padding: 8px;
  }
  
  .add-poi-btn {
    width: 90rpx;
    height: 90rpx;
    right: 20rpx;
    bottom: 80rpx;
  }
  
  .btn-icon {
    font-size: 40rpx;
  }
}

/* 位置提示浮层样式 */
.position-tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
  transform: translate(-50%, -100%);
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
  min-width: 240rpx;
}

.tooltip-text {
  color: white;
  font-size: 24rpx;
  margin-bottom: 10rpx;
}

.add-here-btn {
  background: linear-gradient(135deg, #4B89FD, #3F7BFC);
  color: white;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  margin-top: 10rpx;
  border: none;
  line-height: 1.5;
}

.add-here-btn:active {
  opacity: 0.8;
}
</style> 